<template>
  <div id="app">
    <el-form ref="form" :model="searchForm" label-width="80px">
      <el-row>
        <el-col :span="10" :offset="1">
          <el-form-item label="经办日期">
            <el-date-picker v-model="dateValue" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-form-item>
            <el-button type="primary" size="mini" @click="dialogFormVisible = true">高级搜索</el-button>
            <el-button size="mini" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog title="高级搜索" :visible.sync="dialogFormVisible">
      <el-form :model="daterangeFrom" ref="form" label-width="80px">
        <el-form-item label="经办日期">
          <el-date-picker
            v-model="daterangeFrom.daterangeValue"
            type="daterange"
            align="center"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="业务名称" prop="name">
          <el-input v-model="daterangeFrom.name" type="number"></el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="name">
          <el-input v-model="daterangeFrom.name" type="number"></el-input>
        </el-form-item>
        <el-form-item label="经办人" prop="name">
          <el-select v-model="daterangeFrom.name" placeholder="请选择">
            <el-option label="系统管理" value="1"></el-option>
            <el-option label="用户管理" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回退标志" prop="name">
          <el-select v-model="daterangeFrom.name" placeholder="请选择">
            <el-option label="系统管理" value="1"></el-option>
            <el-option label="用户管理" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%" height="400">
      <el-table-column align="center" prop="date" sortable label="序号" width="150"></el-table-column>
      <el-table-column align="center" prop="name" label="日志流水号" width="120"></el-table-column>
      <el-table-column align="center" prop="province" label="业务名称" width="120"></el-table-column>
      <el-table-column align="center" prop="city" label="统筹区编码" width="120"></el-table-column>
      <el-table-column align="center" prop="address" label="摘要信息" width="300"></el-table-column>
      <el-table-column align="center" prop="zip" label="经办人" width="120"></el-table-column>
      <el-table-column align="center" prop="zip" label="经办信息" width="120"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">界面还原</el-button>
          <el-button type="text" size="small">打印</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateValue: "",
      dialogFormVisible: false,
      currentPage: 5,
      daterangeFrom: {
        daterangeValue: ""
      },
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        }
      ],

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      searchForm: {
        name: ""
      }
    };
  },
  methods: {
    onSearch() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style scoped lang="css">
/deep/.el-dialog__body {
  display: flex;
  justify-content: center;
}
.page {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
